<template lang="">
	<div class="row">
		<!-- <div class="flex col flex-1" > -->
		<h2 class="" style="font-size:5px">出库分析</h2>
	</div>
	<div class="hc_datalist">
		<div>
	<el-table :data="tableData" style="font-size:4px;"
	:header-cell-style="{
            height: '25px',
        }"
				:row-style="{height: '20px'}">
    <el-table-column prop="name" label="医院名" width="110"  show-overflow-tooltip/>
    <el-table-column prop="phmany" label="普耗金额" width="100"  />
    <el-table-column prop="gzmany" label="高值金额"  width="100" />
			<el-table-column prop="hbup" label="环比增长"  width="100" />
  </el-table>
	</div>
	<!-- </div> -->
	</div>
</template>
<script>
export default {
	name: "dashboard",
	components: {
	},
	data() {
		return {
			tableData: [{
				name: '永嘉县人民医院',
				phmany: '1亿(20%)',
				gzmany: '8千万(15%)',
				hbup: '5%(4%)',
			},
			{
				name: '温州市中心医院',
				phmany: '1亿(20%)',
				gzmany: '8千万(15%)',
				hbup: '5%(4%)',
			}]
		}

	},
	created() {
		setInterval(this.scroll, 1000)
	},
	mounted() {

	},
	methods: {
		scroll() {
			let el = document.querySelector('.el-table__body-wrapper')
			el.addClassName = 'anim'
			setTimeout(() => {
				// console.log(this.items[0])
				this.tableData.push(this.tableData[0]);  // 将数组的第一个元素添加到数组的
				this.tableData.shift();    //删除数组的第一个元素
			}, 1000)
		}
	}
}
</script>
<style>
#multipleBar3 {
	margin: 0;
	padding: 0;
}

.flex {
	display: flex;
}

.col {
	flex-direction: column;
}

#bar_row {
	height: 30px;
}

bady {
	margin: 0;
}

.list_title1 {
	/* background-color: #383d53; */
	color: #fff;
	padding: 8px 2px;
	border-radius: 4px;
	/* // border-left: 5px solid var(--divor-primary-light-5); */
	height: 20px;
	line-height: 20px;
	margin-top: 10px;
}

#multipleBar3 {
	/* background-color: #2f3243; */
	padding: 8px 2px;
	border-radius: 6px;
	/* // border-left: 5px solid var(--divor-primary); */
	height: 170px;
	line-height: 10px;
}

.title_data {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 130px;
}

.table-name {
	font-size: 25px;
	color: rgb(236, 240, 245);
}

.left_data {
	font-size: 5px;
	color: #ffffffba;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	margin-top: 20px;
	height: 100px;
	/* // line-height: 100px; */
	/* // background-color: #ffffff45; */
	width: 250px;
}

.right_data {
	font-size: 5px;
	color: #ffffffba;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	margin-top: 20px;
	height: 100px;
	/* // line-height: 100px; */
	/* // background-color: #ffffff45; */
	width: 250px;
}

.numberdata {
	background-image: linear-gradient(to top, #5699e661, #69a8e6);
	margin-left: 5px;
	border-radius: 5px;
}

.hc_datalist {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
</style>
